<template>
  <el-dialog
    title="成员列表"
    :visible.sync="dialogVisible"
    width="48%"
    >
      <div class="mod-prod-brand">
        <div class="search-bar">
          <el-form :inline="true" class="search-form" size="small">
            <div class="input-row">
              <el-form-item :label="$t('chatMsg.userName')" prop="groupName">
                <el-input v-model="page.userName" :placeholder="$t('chatMsg.keyupGroupName')" maxlength="30"  />
              </el-form-item>
              <el-form-item :label="$t('chatMsg.bannedStatus')" prop="groupName">
                <el-select v-model="page.status" :placeholder="$t('chatMsg.bannedStatus')" @change="changeFunc()">
                  <el-option :label="$t('chatMsg.noBrand')" :value="0"></el-option>
                  <el-option :label="$t('chatMsg.overBrand')" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <div class="default-btn primary-btn" @click="searchChange(true)">{{$t('crud.searchBtn')}}</div>
                <div class="default-btn" @click="resetSearchForm()">{{$t('product.reset')}}</div>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="main-container">
          <div class="operation-bar">
            <div
              class="default-btn primary-btn"
              @click.stop="bannedSy(1)"
              >{{$t('chatMsg.openMoreUserBanned')}}
            </div>
            <div
              class="default-btn danger-btn"
              @click.stop="bannedSy(2)"
              >{{$t('chatMsg.closeMoreUserBanned')}}
            </div>
          </div>
          <div class="table-con spec-table">
            <el-table
              ref="specListTable"
              :data="dataValue"
              header-cell-class-name="table-header"
              row-class-name="table-row"
              @selection-change="handleSelectionChange">
              style="width: 100%">
              <el-table-column
                align="center"
                type="selection"
                width="100">
              </el-table-column>
              <el-table-column
                prop="id"
                :label="$t('chatMsg.userId')"
                width="150">
              </el-table-column>

              <el-table-column
                prop="userName"
                :label="$t('chatMsg.userName')"
                width="150">
              </el-table-column>

              <el-table-column
                :label="$t('chatMsg.userImg')"
                width="150">
                <template slot-scope="scope">
                  <img style="width: 100px;height: 100px;" :src="resourcesUrl+scope.row.userPortrait" alt="">
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('chatMsg.iscreator')"
                width="150">
                <template slot-scope="scope">
                  <p>{{scope.row.groupCreator?'是':'否'}}</p>
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('chatMsg.isadmin')"
                width="150">
                <template slot-scope="scope">
                  <p>{{scope.row.isManage == 1 ?'是':'否'}}</p>
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('chatMsg.bannedStatus')"
                width="150">
                <template slot-scope="scope">
                  <div class="table-cell-text">{{ scope.row.status?$t('chatMsg.overBrand'):$t('chatMsg.noBrand') }}</div>
                </template>
              </el-table-column>

              <el-table-column
                align="center"
                :label="$t('publics.operating')"
                width="300"
                >
                <template slot-scope="scope">
                  <div class="text-btn-con">
                   <div
                     class="default-btn text-btn"
                     @click="bannedFunc(scope.row)"
                     > {{ scope.row.status?$t('chatMsg.closeBanned'):$t('chatMsg.opemBanned')}}
                   </div>
                   <div
                     v-if="!scope.row.groupCreator"
                     class="default-btn text-btn"
                     @click="setGroupLeader(scope.row)"
                     >设为群主
                   </div>
                    <div
                      v-if="!scope.row.groupCreator && scope.row.isManage == 0"
                      class="default-btn text-btn"
                      @click="setGroupAdmin(scope.row)"
                    >设置管理员
                    </div>
                    <div
                      v-if="!scope.row.groupCreator && scope.row.isManage == 1"
                      class="default-btn text-btn"
                      @click="cancelPlatAdmin(scope.row)"
                    >取消管理员
                    </div>
<!--                   <div-->
<!--                     class="default-btn text-btn"-->
<!--                     @click="removeFunc(scope.row)"-->
<!--                     >  {{ $t('chatMsg.removeGroup')}}-->
<!--                   </div>-->

                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            v-if="dataValue.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{$t('remindPop.cancel')}}</el-button>
      <el-button type="primary" @click="dialogVisible = false">{{$t('remindPop.confirm')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  // eslint-disable-next-line no-unused-vars
  import groupMember from './groupMember'

  export default {
    props: {
      groupId: {
        type: Number,
        default: ''
      }
    },
    data () {
      return {
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dialogVisible: false,
        brandStatus: 0,
        dataValue: [],
        // 修改
        page: {
          pageSize: 10,
          pageNum: 1,
          total: null,
          groupId: '',
          userName: '',
          status: null
        },
        // 禁言参数
        brandValue: {
          groupId: null,
          users: []
        },
        flag: false
      }
    },

    methods: {

      // 获取数据列表
      getDataList () {
        this.page.groupId = this.groupId
        this.$http({
          url: this.$http.adornUrl('/admin/melt/group/getGroupUsers'),
          method: 'get',
          params: this.page
        }).then((data) => {
          this.dataValue = data.data.list
          this.page.total = data.data.total
          console.log('列表', data)
        })
      },

      // 获取选择的用户
      handleSelectionChange (val) {
        this.brandValue.users = val
        console.log('多选1', this.brandValue.users)
      },

        // 一键开启禁言/一键关闭禁言
      bannedSy (idenf) {
        console.log('--------------', this.brandValue.users)
        if (this.brandValue.users.length == 0) {
          this.$message({
            message: '请选择用户',
            type: 'error',
            duration: 1500
          })
          return
        }
        var url
        if (idenf == 1) {
          console.log('23222', this.brandValue.users)
          url = '/admin/melt/group/taboo'
        } else {
          url = '/admin/melt/group/cancelTaboo'
        }
        this.brandValue.groupId = this.groupId
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'post',
          data: this.brandValue
        }).then((data) => {
          this.$message({
            message: idenf == 1 ? this.$i18n.t('chatMsg.opemBannedStatus') : this.$i18n.t('chatMsg.closeBannedStatus'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      },

        // 单个用户禁言
      bannedFunc (row) {
        this.brandValue.users = [{id: row.id}]
        if (row.status) {
          this.bannedSy(2)
        } else {
          this.bannedSy(1)
        }
      },

      setGroupLeader (row) {
        let data = {groupId: this.groupId, toUserId: row.id}
        console.log(row)
        this.$confirm('确定群主移交给【' + row.userName + '】？原群主将失去群主身份。', this.$i18n.t('text.tips'), {
          confirmButtonText: this.$i18n.t('coupon.confirm'),
          cancelButtonText: this.$i18n.t('coupon.cancel'),
          type: 'warning'
        }).then(() => {
          console.log(data)
          this.$http({
            url: this.$http.adornUrl('/account/im/group/changeLeader'),
            method: 'post',
            data: data
          }).then((data) => {
            this.$message({
              message: this.$i18n.t('publics.operation'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          })
        }).catch(() => { })
      },
      setGroupAdmin (row) {
        let data = {groupId: this.groupId, userId: [row.id]}
        this.$http({
          url: this.$http.adornUrl('/admin/melt/group/setUpAdminTaboo'),
          method: 'post',
          data: data
        }).then((data) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      },
      cancelPlatAdmin (row) {
        let data = {groupId: this.groupId, userId: [row.id]}
        this.$http({
          url: this.$http.adornUrl('/admin/melt/group/cancelPlatAdmin'),
          method: 'post',
          data: data
        }).then((data) => {
          this.$message({
            message: this.$i18n.t('publics.operation'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      },
        // 禁言状态
      changeFunc () {
        this.dataValue = []
        if (this.page.status == 0) {
          this.page.status = 0
        } else {
          this.page.status = 1
        }
        this.getDataList()
      },

      // 搜索
      searchChange () {
        this.getDataList()
      },

      // 重置
      resetSearchForm () {
        this.page.userName = ''
        this.page.status = null
        this.getDataList()
      },

      // 分页
      handleSizeChange (val) {
        this.page.pageSize = val
        this.getDataList()
      },
      handleCurrentChange (val) {
        this.page.pageNum = val
        this.getDataList()
      }
    }
  }
</script>
